<template>
  <div class="interview" v-if="currentQ && currentQ.detail">
    <!-- 头部导航 -->
    <van-nav-bar>
      <template #left>
        <i @click="$router.back()" class="iconfont iconbtn_nav_back"></i>
      </template>
      <template #title>
        <span
          >面试题<sup>{{ questionList.length }}</sup></span
        >
      </template>
      <template #right>
        <span @click="cardShow = !cardShow">答题卡</span>
      </template>
    </van-nav-bar>
    <!-- 答题区域 -->
    <div class="answer">
      <div class="contain">
        {{ currentIndex + 1 }}--[{{ questionType[currentQ.detail.type] }}]{{
          currentQ.detail.title
        }}
      </div>
      <div class="tags">
        <div
          class="tag"
          v-for="(item, index) in currentQ.detail.tag"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <!-- 单选的答案 -->
      <div class="options" v-if="currentQ.detail.type === 1">
        <div
          class="option iconfont"
          :class="{
            right:
              step >= 2 &&
              currentQ.answer &&
              currentQ.answer.singleAnswer === optionStr[index],
            error:
              step >= 2 &&
              singleAnswer !== currentQ.answer.singleAnswer &&
              singleAnswer === optionStr[index],
            selection: singleAnswer === optionStr[index]
          }"
          v-for="(item, index) in currentQ.detail.option"
          :key="index"
          @click="select(optionStr[index])"
        >
          {{ optionStr[index] }}.{{ item }}
        </div>
      </div>
      <!-- 多的答案 -->
      <div class="options" v-if="currentQ.detail.type === 2">
        <div
          class="option iconfont"
          :class="{
            selection: multipleAnswer.includes(optionStr[index]),
            right:
              step >= 2 &&
              currentQ.answer.multipleAnswer.includes(optionStr[index]),
            error:
              step >= 2 &&
              multipleAnswer.includes(optionStr[index]) &&
              !currentQ.answer.multipleAnswer.includes(optionStr[index])
          }"
          v-for="(item, index) in currentQ.detail.option"
          :key="index"
          @click="selectMuti(optionStr[index])"
        >
          {{ optionStr[index] }}.{{ item }}
        </div>
      </div>
    </div>
    <!-- 答案解析 -->
    <div class="parsing" v-if="step >= 2">
      <h3>答案解析</h3>
      <div class="correct-answer">
        正确答案:{{ currentQ.answer.singleAnswer }}
      </div>
      <div class="info">
        <div class="difficult">
          难度：<span>{{ difficult[currentQ.answer.difficulty] }}</span>
        </div>
        <div class="submit-time">提交次数：{{ currentQ.answer.submitNum }}</div>
        <div class="correct-time">
          正确次数：{{ currentQ.answer.correctNum }}
        </div>
      </div>
      <div class="parsing-text">
        {{ currentQ.answer.answerAnalysis }}
      </div>
    </div>
    <!-- 底部区域 -->
    <div class="bottom">
      <div class="left">
        <i class="iconfont iconbtn_shoucang_nor"></i>
        <span>收藏</span>
      </div>
      <div class="left">
        <i class="iconfont iconbtn_shuati_fankui"></i>
        <span>反馈</span>
      </div>
      <div class="right">
        <span class="current">{{ currentIndex + 1 }}</span
        >/233题
      </div>
      <div class="right">
        <van-button type="info" v-if="step >= 2" @click="nextOne"
          >下一题</van-button
        >
        <van-button
          @click="submit"
          type="danger"
          v-if="step < 2"
          :disabled="step !== 1"
          >提交</van-button
        >
      </div>
    </div>
    <!-- 答题卡区域 -->
    <van-popup class="card" v-model="cardShow" position="bottom">
      <van-nav-bar title="答题卡">
        <template #right>
          <span>{{ currentIndex + 1 }}</span
          >/{{ questionList.length }}题
        </template>
      </van-nav-bar>
      <div class="content">
        <div class="total">共{{ questionList.length }}题</div>
        <ul class="items">
          <li
            class="item"
            :class="{
              right:
                questionList[index].answer &&
                questionList[index].answer.isRight,
              error:
                questionList[index].answer &&
                !questionList[index].answer.isRight,
              selection: currentIndex === index
            }"
            v-for="(item, index) in 74"
            :key="index"
            @click="changeQ(index)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 导入接口函数
import {
  getQuestionInfo,
  submitQuestion,
  nextQuestion
} from '../../../api/question.js'
export default {
  name: 'interview',
  data () {
    return {
      step: 0, // 当前答题状态
      type: '', // 职位类型id
      city: '', // 城市名
      questionList: [], // 题目列表
      currentIndex: 0, // 当前题目下标
      id: '', // 当前题目id
      questionType: {
        // 题目类型
        1: '单选',
        2: '多选',
        3: '简答'
      },
      difficult: {
        // 题目难度
        1: '简单',
        2: '一般',
        3: '困难'
      },
      optionStr: 'ABCDEFG', // 题目选项
      singleAnswer: '', // 当前选中的选中的
      multipleAnswer: [], // 多选答案
      cardShow: false // 答题卡显示或隐藏
    }
  },
  methods: {
    // 点击跳转到指定题目
    async changeQ (index) {
      // 将当前currentindex改为题目编号
      this.currentIndex = index
      this.cardShow = false
      // 判断跳转的题面信息
      if (this.currentQ.answer) {
        // 如果有answer则说明此题已经答过，直接将状态改为2
        this.step = 2
        console.log(this.currentQ)
      } else if (this.currentQ.detail) {
        // 如果没有answer有detail说明没有答题有获取过数据
        this.step = 0
      } else {
        // 没有answer也没有detail说明还没有获取过数据
        this.step = 0
        const res = await nextQuestion(this.currentQ.id)
        this.$set(this.currentQ, 'detail', res.data.data)
      }
    },
    // 多选方法
    selectMuti (a) {
      if (this.step < 2) {
        const index = this.multipleAnswer.indexOf(a)
        if (index === -1) {
          // 不存在则直接添加到答案数组中
          this.multipleAnswer.push(a)
        } else {
          // 存在则删除
          this.multipleAnswer.splice(index, 1)
        }
        this.step = 1
      }
    },
    // 下一题方法
    async nextOne () {
      // 题目索引加1
      this.currentIndex += 1
      if (this.currentQ.answer) {
        this.step = 2
      } else if (this.currentQ.detail) {
        this.step = 0
      } else {
        // 修改状态
        this.step = 0
        // 清空答案
        this.singleAnswer = ''
        this.multipleAnswer = []
        // 根据id发起请求获取下一题数据
        const res = await nextQuestion(this.currentQ.id)
        this.$set(this.currentQ, 'detail', res.data.data)
      }
    },
    // 提交答案
    async submit () {
      const res = await submitQuestion({
        id: this.currentQ.id,
        singleAnswer: this.singleAnswer,
        multipleAnswer: this.multipleAnswer
      })
      this.$set(this.currentQ, 'answer', res.data.data)
      console.log(this.currentQ.answer)
      // 修改状态
      this.step = 2
    },
    // 选择答案方法
    select (option) {
      // 判断状态是否小于2,是才能切换答案
      if (this.step < 2) {
        // 保存当前选中的答案
        this.singleAnswer = option
        // 将当前状态改为1
        this.step = 1
      }
    }
  },
  computed: {
    currentQ () {
      // 直接返回当前题目信息
      return this.questionList[this.currentIndex]
    }
  },
  async created () {
    // 接收并保存question页面传递来的参数
    this.type = this.$route.params.type
    this.city = this.$route.params.city
    // 根据参数发起请求
    const res = await getQuestionInfo({ type: this.type, city: this.city })
    this.questionList = res.data.data
    console.log(this.questionList)
    this.id = res.data.data[this.currentIndex].id
  }
}
</script>

<style lang="less" scoped>
.interview {
  padding-bottom: 80px;
  // 顶部导航烂样式
  .iconbtn_nav_back {
    font-size: 44px;
  }
  // 答题区域样式
  .answer {
    padding: 20px 15px;
    .contain {
      font-size: 16px;
      line-height: 22px;
    }
    .tags {
      margin: 10px 0;
      font-size: 12px;
      display: flex;
      .tag {
        padding: 4px 6px;
        background-color: #ccc;
        border-radius: 10px;
        margin-right: 10px;
      }
    }
    .options {
      margin: 30px 0;
      .option {
        border: 1px solid #ccc;
        font-size: 18px;
        padding: 10px 15px;
        margin-bottom: 10px;
      }
      // 选中答案的样式
      .right {
        background-color: #ddfad9;
        font-size: #ddfad9;
        &::after {
          float: right;
          content: '\e604';
          color: #1dc779;
        }
      }
      .error {
        background-color: #ffefea;
        font-size: #ffefea;
        &::after {
          float: right;
          content: '\e605';
          color: #ff4949;
        }
      }
      .selection {
        border: 1px solid blue;
      }
    }
  }
  // 答案解析区域样式
  .parsing {
    padding: 0 15px;
    h3 {
      font-size: 18px;
    }
    .correct-answer {
      font-size: 17px;
      color: #4ad294;
      margin-bottom: 15px;
    }
    .info {
      display: flex;
      font-size: 13px;
      background-color: #ebd7bf;
      justify-content: space-around;
      padding: 5px;
      border-radius: 4px;
      margin-bottom: 20px;
    }
    .parsing-text {
      font-size: 16px;
      font-weight: 500;
    }
  }
  // 底部样式
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top: 20px;
    display: flex;
    text-align: center;
    align-items: center;
    background-color: #fff;
    border-top: 1px solid #ccc;
    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      i {
        font-size: 20px;
      }
    }
    .right {
      flex: 2;
      font-size: 18px;
      .current {
        font-size: 24px;
        color: red;
      }
    }
  }
  // 答题卡样式
  .card {
    background-color: #f6f4f5;
    .content {
      .total {
        font-size: 16px;
        padding: 15px;
      }
      .items {
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        .item {
          width: 33px;
          height: 33px;
          font-size: 12px;
          border: 1px solid #c0c0c0;
          color: #c0c0c0;
          border-radius: 50%;
          text-align: center;
          line-height: 33px;
          margin: 5px;
          margin-left: 8px;
        }
        .selection {
          border: 1px solid #000;
          color: #000;
        }
        .right {
          border: 1px solid transparent;
          color: #67ae81;
          background-color: #d6fdd0;
        }
        .error {
          border: 1px solid transparent;
          color: #d9817d;
          background-color: #ffeeeb;
        }
      }
    }
  }
}
</style>
